<template>
  <el-dialog @close="onClose" v-model="isShowDialog" width="800px">
    <template #header>
      <div class="font-bold flex-center">项目列表</div>
    </template>

    <div class="h-[430px] box flex-center">
      <el-table ref="TableRef" :data="dataList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />

        <el-table-column label="项目名称" prop="name" />

        <el-table-column label="创建时间" prop="projectCreateTime" />
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="queryList"
      />
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

import { useAppStore } from '@/store/modules/app';

const TableRef = ref(null);

const appStore = useAppStore();

import { getProjectList } from '@/api/project';

const route = useRoute();

const isShowDialog = ref(false);

const props = defineProps({
  advertiserArray: {
    type: Array
  },
  modelValue: {
    type: Boolean,
    required: false,
    default: false
  }
});

const queryParams = ref({
  advertiserId: props.advertiserArray?.[0]?.id || '',
  accountId: appStore.accountId,
  pageNum: 1,
  pageSize: 10
});

const total = ref(0);

const dataList = ref([]);

const emit = defineEmits(['update:modelValue', 'confirm']);

const selectedList = ref([]);
const counter = ref(0);
const form = ref({});

const onClose = () => {
  isShowDialog.value = false;
  emit('update:modelValue', false);
};

const submitForm = () => {
  if (!selectedList.value || selectedList.value.length == 0) {
    proxy?.$modal.msgError('请选择项目');
    return false;
  }
  emit('confirm', selectedList.value);
  emit('update:modelValue', false);
};

const handleSelectionChange = (selection) => {
  // let oldList = selectedList.value.filter((item) => {
  //   let isIn = dataList.value.find((at) => {
  //     return at.projectId == item.projectId;
  //   });

  //   return !isIn;
  // });
  // selectedList.value = oldList.concat(e);
  if (selection.length > 1) {
    // 取消之前的选择
    TableRef.value.clearSelection();
    // 只保留最后一个选择
    TableRef.value.toggleRowSelection(selection[selection.length - 1]);
    selectedList.value = selection[selection.length - 1];
  } else {
    selectedList.value = selection.length ? selection[0] : null;
  }
};

const queryList = async () => {
  let value = route.query?.ids;
  value = value && decodeURIComponent(value);

  if (value) {
    let list = JSON.parse(value);

    let res = await getProjectList(queryParams.value);
    dataList.value = res.rows || [];
    total.value = res.total || 0;
    counter.value = counter.value + 1;
  }
};

watch(
  () => props.modelValue,
  () => {
    isShowDialog.value = props.modelValue;
  }
);

onMounted(() => {
  queryList();
});

watch(
  () => counter.value,
  () => {
    selectedList.value.forEach((item) => {
      nextTick(() => {
        let isSelectIdx = dataList.value.findIndex((at) => {
          return at.projectId == item.projectId;
        });
        if (isSelectIdx != -1) {
          TableRef.value?.toggleRowSelection(dataList.value[isSelectIdx], true);
        }
      });
    });
  }
);
</script>
<style lang="scss" scoped></style>
